<template>
    <div>
        <table>
            <tr>
                <td>账号：</td> <td><input type="text" v-model="form.login"></td>
            </tr>
            <tr>
                <td>密码：</td> <td><input type="password" v-model="form.psd"></td>
            </tr>
        </table>
        <button @click="submit">登录</button>
    </div>
</template>


<script setup lang="ts">
import { reactive ,onMounted,onUnmounted,onActivated,onDeactivated} from 'vue';
const form = reactive({
    login:"",
    psd:""
})

const submit = ()=>{
    console.log(form)
}

onMounted(()=>{
    console.log("login mounted,只执行一次")
})

onActivated(()=>{
    console.log("login onActivated,每次进来都执行一下")
})

onDeactivated(()=>{
    console.log("login onDeactivated,每次离开都执行一下")
})

onUnmounted(()=>{
    console.log("reg onunmounted,有了keep-alive就不会执行了")
})

</script>

<script lang="ts">
export default {
    name:"Login"
}
</script>


<style scoped lang="less">

</style>